<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖</title>
    <style>
        .灰盒子 {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
<h3>防抖</h3>
<p>
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，<br>
    如果在 n 秒内又触发了事件，则会重新计算函数执行时间
</p>
<p>
    开发使用场景- 搜索框防抖 <br>
    假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多 <br>
    我们设定一个时间，假如300ms， 当输入第一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符， <br>
    则需要再等300ms 后发送请求
</p>
<a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=197&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7">
     防抖 视频讲解
</a>
<hr>


<!--
利用防抖来处理-鼠标滑过盒子显示文字
要求： 鼠标在盒子上移动，鼠标停止之后，1s后里面的数字就会变化+1
-->
<!--
实现方法有2个
1. 使用lodash库, 实现防抖
2. 自己手写.....
-->
<!--
防抖的方式实现 核心思路：
利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器
①： 写一个防抖函数debounce ，来控制这个操作函数(mouseMove)
②: 防抖函数传递2个参数， 第一个参数 mouseMove函数，第二个参数 指定时间500ms
③： 鼠标移动事件，里面写的是防抖函数
④： 声明定时器变量 timeId
⑤： 但是节流函数因为里面写的函数名 debounce(mouseMove, 500), 是调用函数，无法再次调用执行，
所以需要在节流函数里面写return 函数 这样可以多次执行
⑥： 如果有定时器，则清除定时器
⑦: 否则开启定时器， 在设定时间内，调用函数
-->
<div class="灰盒子"></div>

<script src="lodash.min.js"></script>
<script>
    let i = 1 // 这个是显示在,盒子里的数字
    // 获取DOM元素
    const 盒子 = document.querySelector('.灰盒子')

    function 鼠标移动() {
        盒子.innerHTML = i++ // 盒子里显示数字,并且增加
    }


    // 方法1,简单吧
    // 监控 经过事件.  lodash库里, _.debounce防抖函数, 经过多少时间,调用什么函数
    // 盒子.addEventListener('mousemove', _.debounce(鼠标移动, 1000))


    // 方法2,自己手写.......
    function 防抖(鼠标移动, 经过时间) {
        let 延时器序列号  // 延时器变量

        // 这里是特殊处理,因为下面的'防抖'函数只会调用一次,鼠标经过调用停止就不调用了,我们要的效果是鼠标停止就计数改变数字
        // 简单说: 这里函数嵌套函数,我们要的是里层函数,所以要返回一个函数
        // return 返回一个匿名函数
        return function () {
            // 先判断有没有延时器,如果有清除
            if (延时器序列号) {
                clearTimeout(延时器序列号) // 关闭延时器
            }
            // 没有延时器了,在开启延时器
            延时器序列号 = setTimeout(function () {
                鼠标移动() // 调用函数,注意加括号
            }, 经过时间)
        }
    }

    盒子.addEventListener('mousemove', 防抖(鼠标移动, 1000))

    // 防抖(鼠标移动, 1000) = return function () {} // 我们要的是return 返回的函数
</script>
</body>
</html>